<template>

			    <view class="tabs">
					
			        <scroll-view  class="scroll-h"  :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			            <view   v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id" class="uni-tab-item" :data-current="index" @click="ontabtap">
			                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			            </view>
			        </scroll-view>
					
		
			     
			         <swiper :style="{height:scroll_H+'px'}" :current="tabIndex" class="swiper-box" :duration="300" @change="ontabchange">
			          
						<swiper-item  v-for="(tab,index) in tabBars" :key="tab.id" class="swiper-item none" >
		<!-- 				<view class="nonebox">
						<view class="ndata"><image src="../../static/icon/gamehall_icon_notask.png"></image></view>	
						<view>暂无数据</view>
						</view> -->
						<view class="task" v-for="(tab,index) in tabBars" :key="tab.id">
						<view class="title">
							<label class="taskno">8048066</label>
							<label class="date">2020-12-20 07:01:46</label>
						</view>	
						<view class="content">
							<view class="img" ><image src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"></image> </view>
							<view class="mark">
								<view class="shop">S804806600</view>
								<view class="coin">6.30</view>
								<view class="pay">预付金额：169.26</view>
							</view>
						</view>
						
						<view class="btn">
							<text class="time">01:29:15</text>
							<button @click="start()">开始任务</button> 
							<button class="cancel" @click="cancel()">取消任务</button>
							</view>
						
						</view>
						
						
				
			            </swiper-item>
						

			        </swiper>	
			    </view>

</template>

<script>
	export default {
		data() {
			return {
				     scroll_H:"600",
				     scrollInto: "",
                     tabIndex: 0,
                            tabBars: [{
                                name: '待操作',
								id:'t1'
                            }, {
                                name: '商家处理中',
								id:'t2'
                            }, {
                                name: '待好评',
								id:'t3'
                            }, {
                                name: '申诉中',
								id:'t4'
                            }, {
                                name: '已完成',
								id:'t5'
                            }, {
                                name: '已取消',
								id:'t6'
                            }],
                        
			}
		},
				onNavigationBarButtonTap(e) {			uni.navigateTo({				url:"rule"			})		},
		onLoad() {
          var a_h=document.querySelector("uni-page-wrapper").clientHeight;
		  this.scroll_H = (a_h-30);
	       
		},
		onShow() {



		},
		methods: {

		           ontabtap(e) {
		                 let index = e.target.dataset.current || e.currentTarget.dataset.current;
		                 this.tabIndex = index;
						     this.scrollInto = this.tabBars[index].id;
		             },
		 			
		             ontabchange(e) {
		                 let index = e.target.current || e.detail.current;
		                this.tabIndex = index;
						  this.scrollInto = this.tabBars[index].id;
		             },
					 start:function(e){
					 uni.navigateTo({
					 	url:"info"
					 })
					 },
					 cancel:function(e){
					 uni.showToast({
					 title:'取消成功'
					 })
					  },

		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	  .tabs {
	        background-color: #ffffff;
	        /* #ifdef MP-ALIPAY || MP-BAIDU */
	        height: 100vh;
	        /* #endif */
	    }
	
	    .scroll-h {
			text-align: center;
	        width:100%;
	        height: 80rpx;
			overflow-y: scroll;
			white-space: nowrap;
			border-top: 1px #F5F5F5 solid;
	        border-bottom: 1px #F5F5F5 solid;
	    }
	
	    .line-h {
	        height: 1rpx;
	        background-color: #cccccc;
	    }
	
	    .uni-tab-item {
		 margin-left: 10px;
		 margin-right:10px;
         display: inline-block;
	    }

	    .uni-tab-item-title {
	        color: #555;
	        font-size: 30rpx;
	        height: 80rpx;
	        line-height: 76rpx;
			height: 100%;
	    }
	
	    .uni-tab-item-title-active {
	         color: #ff8c00;
			  border-bottom: 3px #ff8c00 solid;
			  height: 100%;
	    }
		.nonebox{
             height: 150px;
			text-align: center;
			font-size: 13px;
			color: #c6c6c6;
		}
		.ndata{
			padding-top: 35px;
			width: 60px;
			height: 60px;
			margin: 0 auto;
		}
		.ndata image{
			width: 100%;
			height: 100%;
		}
		
		.task{
			background: white;
			margin-top: 5px;
		}
		
		.task .title{
			padding: 0 10px 0 20px;
			height: 30px;
			font-size: 13px;
			color: #999;
			line-height: 30px;
			margin-bottom: 2px;
			border-bottom: 1px #F5F5F5 solid;
		}
		
		.task .title .taskno{
			float: left;
		}
		
		.task .title .date{
			float: right;
		}
	
	    .swiper-box {
		background: #F5F5F5;
	    }
		
		.task .content{
			display: flex;
			justify-content: space-around;
		}
		.task .content .img{
			width: 22%;
			    text-align: right;
			
		}
		.task .content .img image{
			width: 80px;
			height: 80px;
		}
	       
		.task .content .mark{
			width: 70%;
			font-size: 13px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
		.task  .btn{
		  height: 49px;
			border-top: 1px #efeaea solid;
			margin-right: 10px;
		}
		
		.task  .btn .cancel{
			background: rgb(245, 237, 232);
			color: #FE822B;
			margin-right: 10px;
			
		}
		
		.task  .btn .time{
		    height: 49px;
			line-height: 49px;
			padding-left: 20px;
			color: #FE822B;
			font-size: 18px;

		}
		
		.task .btn button{
		float: right;
		width: 100px;
		height: 30px;
		line-height: 30px;
		color: white;
		margin-top: 10px;
		background:#FE822B;
		}	
		.task .content .mark .coin{
			color: #FE822B;
			font-size: 20px;
		}	
	    .swiper-item {
	     overflow-y: scroll;
	    }
	
	    .scroll-v {
	        /* #ifndef MP-ALIPAY */
	        /* #endif */
	        width: 750rpx;
	    }
</style>
